<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>账务流水</title>
	<link rel="stylesheet" href="./css/format.css" />
	<link rel="stylesheet" href="./css/mint-min.css" />
	<link rel="stylesheet" href="./css/transaction-record.css" />
	<link rel="stylesheet" href="./component/component.css" />
</head>

<body>
	<div id="app">
		<div class="transaction-account-info">
			<div class="transaction-account">
				<h3>总金额</h3>
				<p v-text="`￥${allAccount}`"></p>
			</div>
			<div class="transaction-account">
				<h3>累积收益</h3>
				<p v-text="`￥${allIncome}`"></p>
			</div>
		</div>
		<div class="transaction-list">
			<h3>显示最近3个月的明细</h3>
			<ul v-if="transactionList.length">
				<li v-for="item in transactionList" :key="item.id">
					<div class="transaction-list-firstline">
						<p>{{item.status}}&nbsp;-&nbsp;{{item.bankName}}<i>({{item.bankCardNo}})</i></p>
						<span
							:class="{isIncome: item.status === '存入'}">{{item.status === '存入' ? '+' : '-'}}{{item.money}}</span>
					</div>
					<div class="transaction-list-secondline">
						<p>{{item.time}}</p>
						<p>{{item.allAccount}}</p>
					</div>
				</li>
			</ul>

			<div style="height: 200px; overflow: scroll;">
				<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
					<li v-for="item in list">{{ item }}</li>
					<li v-show="loading" class="list-loading-wrap"><img src="./img/icon_loading.gif" />加载中</li>
					<li v-show="noMore" class="list-loading-wrap">我是有底线的</li>
				</ul>

			</div>
		</div>
	</div>
</body>
<script src="./util/vue.min.js"></script>
<script src="./util/rem.js"></script>
<script type="text/javascript" src="./util/mint-min.js"></script>
<script type="text/javascript" src="./util/util.js"></script>
<script src="./js/transaction-record.js"></script>

</html>